<template>
    <div class="table-container">
        <div class="table-query">
            <div class="table-query-left">
                <div class="table-query-item">
                    <span class="table-query-item-tilte">菜单名称：</span>
                    <el-input class="table-query-item-insert" v-model="input" placeholder="请输入菜单名称" />
                </div>
                <div class="table-query-item">
                    <span class="table-query-item-tilte">状态：</span>
                    <el-select v-model="input" class="table-query-item-insert" placeholder="请选择状态">
                        <el-option
                        v-for="item in tableData"
                        :key="item.name"
                        :label="item.name"
                        :value="item.name"
                        />
                    </el-select>
                </div>
            </div>
            <div class="form-query-right">
                <el-button type="primary" :icon="Search">新增</el-button>
                <el-button :icon="Sort">折叠</el-button>
            </div>
        </div>
        <div id="futakiTableHeight" class="table-content">
            <el-table
                :data="tableData"
                style="width: 100%; margin-bottom: 20px"
                row-key="id"
                default-expand-all
                >
                <el-table-column v-for="(item,index) in tableLabelList" :key="index" :prop="item.prop" :label="item.label" :width="item.width">
                    <template #default="scope">
                        <div v-if="item.prop == 'icon'">
                            <el-icon><Delete/></el-icon>
                        </div>
                        <div v-else-if="item.prop == 'status'">
                            <el-button type="success" link>正常</el-button>
                        </div>
                        <span v-else>{{ scope.row[item.prop] }}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" width="200">
                    <template #default="scope">
                        <el-button type="primary" link @click="editFn(scope.$index)"><el-icon><EditPen /></el-icon>修改</el-button>
                        <el-button type="primary" link><el-icon><Plus /></el-icon>新增</el-button>
                        <el-button type="primary" link><el-icon><Delete /></el-icon>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <addn-edit v-if="visible" :visible="visible"></addn-edit>
        <div class="table-pagination">
            <el-pagination
                v-model:current-page="currentPage4"
                v-model:page-size="pageSize4"
                :page-sizes="[100, 200, 300, 400]"
                background="true"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import {
    Search, Sort,EditPen, Plus, Delete
} from '@element-plus/icons-vue'
import AddnEdit from "./components/addnEdit.vue"
const currentPage4 = ref('')
const pageSize4 = ref('')
const input = ref('')
const visible = ref(false)
const tableLabelList = [
    {
        label:'菜单名称',
        prop:'name',
        width:'150'
    },
    {
        label:'图标',
        prop:'icon',
        width:'60'
    },
    {
        label:'排序',
        prop:'date',
        width:'120'
    },
    {
        label:'权限标识',
        prop:'name',
        width:'120'
    },
    {
        label:'组件路径',
        prop:'name',
        width:'120'
    },
    {
        label:'状态',
        prop:'status',
        width:'120'
    },
    {
        label:'创建时间',
        prop:'name',
        width:''
    },
]
const tableData = [
    {
        id: 1,
        date: '2016-05-02',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 2,
        date: '2016-05-04',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 3,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
        children: [
        {
            id: 31,
            date: '2016-05-01',
            name: 'wangxiaohu',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            id: 32,
            date: '2016-05-01',
            name: 'wangxiaohu',
            address: 'No. 189, Grove St, Los Angeles',
        },
        ],
    },
    {
        id: 4,
        date: '2016-05-03',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
    },
]
const editFn = (val:Object) => {
    console.log(val)
    visible.value = !visible.value
}
</script>

<style lang="scss" scoped>
</style>